<template>

    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-card>
            <div slot="header" class="clearfix">
              <span>赛程图片：请上传大小不超过<span style="color: red;font-weight: bolder;"> 500KB </span>格式为<span style="color: red;font-weight: bolder;"> png/jpg/jpeg </span>的文件</span>
            </div>
            <div style="margin: 1.25rem;">
              <image-upload v-model="form.image" :limit="limit" :fileSize="fileSize" :isShowTip="false"></image-upload>
            </div>
            <div style="margin: 1.25rem;">
              <el-button type="primary" @click="submitForm">确认</el-button>
              <el-button @click="resetForm">取消</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { listSchedule, getSchedule, delSchedule, addSchedule, updateSchedule } from "@/api/puyu/schedule";
  export default {
    data() {
      return {
        limit: 20,
        fileSize: 0.5,
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
        labelPosition: 'top',
        dialogImageUrl: '',
        dialogVisible: false,
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        picList: [],
        fileList: [],
        form: {},
        scheduleId: 0,
      };
    },
    created() {
      const scheduleId = this.$route.params && this.$route.params.scheduleId;
      if (!scheduleId) {
        return;
      }
      this.scheduleId = scheduleId
      getSchedule(scheduleId).then(response => {
        this.form = response.data;
      });
    },
    methods: {
      submitForm(formName) {
        if (this.form.image) {;
          updateSchedule(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.resetForm()
          });
        }
      },
      resetForm(formName) {
        const obj = { path: "/puyu/schedule"};
        this.$tab.closeOpenPage(obj);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
